<script setup lang='ts'>
import { ref, onMounted, watch } from "vue"
import { getBookListenDetailInfo, get30ListenAudioInfo, getBookListenChapterInfo } from "@/api/index"
import { useRouter } from 'vue-router'
import LoadingPage from "@/components/LoadingPage.vue"
import { computed } from "@vue/reactivity";
import { showFailToast } from 'vant';

const listenBookInfo = ref<any>()
const chapterBookInfo = ref<any>()
const reverseChapterBookInfo = ref<any>()
const bookOrder = ref<boolean>(true)
const isLoading = ref<boolean>(true)
const $router = useRouter()
const totalAudioUrl = ref<any>()
const currentAudioUrl = ref<any>()
onMounted(async () => {
    let res = await getBookListenDetailInfo($router.currentRoute.value.query.id)
    listenBookInfo.value = res.data.data.sources[0]

    let audioRes = await get30ListenAudioInfo();
    totalAudioUrl.value = audioRes.data.data.urls
    currentAudioUrl.value = totalAudioUrl.value[0].downloadUrl

    let chapterRes = await getBookListenChapterInfo($router.currentRoute.value.query.id)
    chapterBookInfo.value = chapterRes.data.data?.catalogs
    reverseChapterBookInfo.value = chapterBookInfo.value

})
const currentTime = ref<number>(0)
const totalTime = ref<number>(0)
const floorCurrentTime = computed(() => {
    return (Math.floor(currentTime.value / 60) < 10 ? '0' + Math.floor(currentTime.value / 60) : Math.floor(currentTime.value / 60)) + ':' + (Math.floor(currentTime.value % 60) < 10 ? '0' + Math.floor(currentTime.value % 60) : Math.floor(currentTime.value % 60))
})
const floorTotalTime = computed(() => {
    return (Math.floor(totalTime.value / 60) < 10 ? '0' + Math.floor(totalTime.value / 60) : Math.floor(totalTime.value / 60)) + ':' + (Math.floor(totalTime.value % 60) < 10 ? '0' + Math.floor(totalTime.value % 60) : Math.floor(totalTime.value % 60))

})
const listen = ref<any>()  //audio对象
const isplaying = ref<boolean>(false)
const toPlayBook = () => {
    listen.value?.play()
    isplaying.value = true
    totalTime.value = listen.value?.duration
}
const toPauseBook = () => {
    listen.value?.pause()
    isplaying.value = false
}

const audioTimeUpdate = () => {  //音频播放过程进度条currentTime变化
    currentTime.value = listen.value?.currentTime

}
const changeCurrentTime = () => {  //拖动进度条改变当前时间
    listen.value.currentTime = currentTime.value
}

const show = ref<boolean>(false)


const currentIndex = ref<number>(0)
const changeNextBookChapter = async (index: number) => {
    show.value = false
    currentIndex.value = index
    currentAudioUrl.value = await totalAudioUrl.value[currentIndex.value]?.downloadUrl
    await toPlayBook()

    listen.value?.play()

}
const changeOrder = () => {
    bookOrder.value = !bookOrder.value
    reverseChapterBookInfo.value = reverseChapterBookInfo.value.reverse()
}

const changePreChapter = async () => {
    if (currentIndex.value > 0) {
        currentIndex.value--
        currentAudioUrl.value = await totalAudioUrl.value[currentIndex.value]?.downloadUrl
        await toPlayBook()
        listen.value?.play()
        console.log(currentIndex.value);
    } else {
        showFailToast('没有上一集了！');
    }
}
const changeNextChapter = async () => {
    if (currentIndex.value < 30) {
        currentIndex.value++
        currentAudioUrl.value = await totalAudioUrl.value[currentIndex.value]?.downloadUrl
        await toPlayBook()
        listen.value?.play()
        console.log(currentIndex.value);

    } else {
        showFailToast('内容缺失！');
    }
}
const toBookDetail = () => {
    console.log(1);
    $router.push({
        path: '/detail', query: {
            id: listenBookInfo.value.relate.relateId, title: listenBookInfo.value.title
        }
    })
}
</script>

<template>
    <div class="listen" v-if="listenBookInfo" :style="{ backgroundImage: `url(${listenBookInfo.cover})` }">

        <div class="listen-mark">
            <audio :src="currentAudioUrl" preload="auto" ref="listen" @timeupdate="audioTimeUpdate">小说</audio>

            <div class="listen-title">
                <img src="@/assets/imgs/返回2.png" alt="" @click="$router.back()">
                <span>{{ listenBookInfo.title }}</span>
                <img src="@/assets/imgs/其它1.png" alt="">
            </div>
            <div class="book-logo">
                <img v-lazy="listenBookInfo.cover + '?imageView&thumbnail=240y336'" />
            </div>
            <div class="book-content">
                <div class="author">
                    <span>作者：{{ listenBookInfo.author }}</span>
                    <span>主播：{{ listenBookInfo.anchor }}</span>
                </div>
                <div class="price">
                    <span>集数：{{ listenBookInfo.articleCount }}集(已完结)</span>
                    <span>每集价格：{{ listenBookInfo.price }}阅点</span>
                </div>
                <div class="description">
                    <span>书籍简介：</span>
                    <p>{{ listenBookInfo.description }}</p>
                </div>
            </div>
            <div class="listen-action">
                <div class="action-slider">
                    <van-slider v-model="currentTime" active-color="#fc1c1c" @change="changeCurrentTime"
                        :max="totalTime">
                        <template #button>
                            <div class="custom-button">
                                <div class="dot"></div>
                            </div>
                        </template>
                    </van-slider>
                    <div class="action-time">
                        <span>{{ floorCurrentTime }}</span>
                        <span>{{ floorTotalTime }}</span>
                    </div>
                </div>
                <div class="action-change">
                    <img src="@/assets/imgs/列表2.png" alt="" @click="show = true">
                    <img src="@/assets/imgs/上一曲1.png" alt="" @click="changePreChapter">
                    <img src="@/assets/imgs/播放1.png" alt="" class="bofang" @click="toPlayBook" v-if="!isplaying">
                    <img src="@/assets/imgs/暂停1.png" alt="" class="bofang" @click="toPauseBook" v-if="isplaying">
                    <img src="@/assets/imgs/下一曲1.png" alt="" @click="changeNextChapter">
                    <img src="@/assets/imgs/定时1.png" alt="">
                </div>
                <div class="actiokn-bottom">
                    <ul class="list">
                        <li>
                            <img src="@/assets/imgs/加入书架.png" alt="">
                            <span>加入书架</span>
                        </li>
                        <li @click="toBookDetail" v-if="listenBookInfo.relate?.relateId">
                            <img src="@/assets/imgs/阅读书籍.png" alt="">
                            <span>阅读书籍</span>
                        </li>
                        <li>
                            <img src="@/assets/imgs/下载3.png" alt="">
                            <span>批量下载</span>
                        </li>
                        <li>
                            <img src="@/assets/imgs/评论1.png" alt="">
                            <span>评论</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <van-popup v-model:show="show" closeable position="bottom" :style="{ height: '60%' }" class="popup">
            <div class="list-title">
                <span>目录</span>
                <span v-if="bookOrder" @click="changeOrder">倒序</span>
                <span v-if="!bookOrder" @click="changeOrder">正序</span>
            </div>
            <ul class="list">
                <li v-for="i, index in chapterBookInfo" :key="index" @click="changeNextBookChapter(index)">
                    <div class="left">
                        <span v-if="i.price == 0 && currentIndex != index" class="mainfei">免费</span>
                        <span v-if="i.price !== 0 && currentIndex != index" class="fufei">付费</span>
                        <img src="@/assets/imgs/听书1.png" alt="" v-if="currentIndex == index">
                        <span :class="{ active: currentIndex == index }">{{ i.title }}</span>
                    </div>
                    <div class="right">
                        <img src="@/assets/imgs/下载1.png" alt="" v-if="i.price == 0">
                        <img src="@/assets/imgs/下载2.png" alt="" v-if="i.price !== 0">
                    </div>
                </li>
            </ul>
        </van-popup>
    </div>
</template>

<style lang="less" scoped>
.van-popup-background {
    background-color: rgba(104, 101, 101, 0.918);
}

.custom-button {
    width: 16rem;
    height: 16rem;
    color: #fff;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    background-color: #fff;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;

    .dot {
        width: 8rem;
        height: 8rem;
        background-color: #fc1c1c;
        border-radius: 50%;
    }
}

.listen {
    width: 100vw;
    height: 100vh;
    // background-color: aqua;
    background-size: 1000%;
    background-position: 0 -100%;

    .listen-mark {
        padding: 10rem 10rem 0;
        filter: blur(0.3rem);

        width: 100%;
        height: 100%;
        background-color: rgba(104, 101, 101, 0.918);

        .listen-title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
                width: 25rem;
            }

            >span {
                font-size: 17rem;
                color: #fff;
            }
        }

        .book-logo {
            padding: 40rem;
            display: flex;
            justify-content: center;

            img {
                width: 100rem;
                height: 140rem;
                box-shadow: 0 0 13rem 0rem #000;
            }
        }

        .book-content {
            color: #999;
            padding: 0 10rem;
            font-size: 14rem;

            .author {
                display: flex;
                justify-content: left;

                span {
                    color: #fff;
                    font-size: 14rem;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-line-clamp: 1;

                    &:first-child {
                        width: 150rem;
                    }
                }
            }

            .price {
                display: flex;
                justify-content: left;
                margin: 7rem 0;

                span {
                    color: #fff;
                    font-size: 14rem;
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    -webkit-line-clamp: 1;

                    &:first-child {
                        width: 150rem;
                    }
                }
            }

            .description {
                span {
                    font-size: 14rem;
                }

                p {
                    display: -webkit-box;
                    -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
                    text-overflow: ellipsis; //溢出用省略号显示
                    overflow: hidden; //超出的文本隐藏
                    -webkit-line-clamp: 5; //表明3行文本显示省略号,这里要根据自身需求进行设置
                }
            }
        }

        .listen-action {
            margin-top: 50rem;

            .action-slider {
                .action-time {
                    margin-top: 8rem;
                    display: flex;
                    justify-content: space-between;

                    span {
                        color: #fff;
                    }
                }
            }

            .action-change {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1rem solid #999;
                padding-bottom: 15rem;

                img {
                    width: 32rem;
                    height: 32rem;

                    &.bofang {
                        width: 50rem;
                        height: 50rem;
                    }
                }
            }

            .actiokn-bottom {
                margin-top: 20rem;

                ul.list {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    li {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        span {
                            color: #fff;
                            margin-top: 3rem;
                        }

                        img {
                            // width: 25rem;
                            height: 20rem;
                        }
                    }
                }
            }
        }
    }

    .popup {
        .list-title {
            padding: 10rem 15rem;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eee;
            height: 50rem;

            span {
                font-size: 16rem;

                &:last-child {
                    padding: 0rem 5rem;
                    border: 1rem solid #ccc;
                    border-radius: 10rem;
                    margin-left: 10rem;
                }
            }
        }

        ul.list {
            height: calc(60vh - 50rem);
            overflow: auto;

            li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10rem 8rem;
                border-bottom: 1px solid #eee;

                .left {
                    display: flex;
                    justify-content: left;

                    img {
                        width: 25rem;
                    }

                    span {
                        font-size: 14rem;
                        color: #888;

                        &.mainfei {
                            background-color: #eb5e5e;
                            color: #fff;
                            padding: 2rem;
                            font-size: 12rem;
                            border-radius: 5rem;
                            margin-right: 5rem;
                        }

                        &.fufei {
                            padding: 2rem;
                            font-size: 12rem;
                            border-radius: 5rem;
                            border: 1rem solid #ccc;
                            margin-right: 5rem;
                        }

                        &.active {
                            color: #fc1c1c;
                        }
                    }
                }

                .right {
                    img {
                        width: 20rem;
                    }
                }
            }
        }
    }

}
</style>
